<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* border-top   right  bottom left */
        /* 四个方向边框的三要素小属性的写法  boeder-top-width  细碎的小属性，用于层叠大属性*/
        /* 去掉边框：border:none   border-left:none; */
        /* 可以利用边框制作三角形 */
        *{margin:0;padding:0;}
        div.d1{
            width: 200px;
            height: 200px;
            background-color: aqua;
            margin-right: 10px;
            float:left;
            margin-bottom:10px;
        }
        div.d2{
            width: 200px;
            height: 200px;
            background-color: aqua;
            margin-right: 10px;
            float:left;
            border-top:8px solid red;
            margin-bottom:10px;
        }

        div.dashuxing{
            overflow: hidden;
        }
        section {
            float:left;
            margin-right: 10px;
            height: 100px;
            width: 100px;
            border: 1px solid #000;
        }
        section.spec{
            /* 细碎的小属性，用于层叠 */
            border-top-color:red;
            border-right-style:dotted;
        }

        section.none{
            border-right:none;
        }

        div.qiang{
            clear: both;
        }

        div.sanjiaoxing{
            /* 利用边框来做口向下的三角形。 */
            width: 0px;
            height: 0px;
            /* transparent是透明色的意思 */
            border: 20px solid transparent;
            border-top-color: tomato;
        }
    </style>
</head>
<body>
    <div class="d1"></div>
    <div class="d2"></div>

    <div class="dashuxing">
        <section></section>
        <section class="spec"></section>
        <section></section>
        <section class="none"></section>
        <section></section>
    </div>

    <div class="qiang"></div>

    <div class="sanjiaoxing"></div>
</body>
</html>